<template>
    <div class="w-250px h-250px m-auto h-300" :class="{'bg-white':!state.isDark,'vibrate':state.vibrating}" @contextmenu.prevent
    >
        <div class="m-auto  flex justify-between items-center pl-2 pt-2 pr-2" >
            <div class="flex items-center">
                <div class="flex items-center">
                    <Rank class="cursor-pointer" style="width: 1.4em; height: 1.4em;color:#4194f8;" data-tauri-drag-region />
                </div>
                <div class="flex items-center">
                    <el-switch
                    v-model="state.isDark"
                    class="ml-2"
                    inline-prompt
                    :active-icon="Sunny"
                    :inactive-icon="Moon"
                    @change="changeTop"
                />
                </div>
            </div>
            <div class="flex items-center cursor-pointer">
                <Close style="width: 1.4em; height: 1.4em;color:#4194f8" @click="closeWindow" />
            </div>
            
        </div>
        <div class="flex flex-col">
            <div class="mx-auto cursor-pointer select-none" @click="miniStop">
                <el-progress type="circle" :width="110" :stroke-width="12" :percentage="state.progress" :color="state.colors">
                    <div>
                        <div v-if="state.isDark && state.status!=='running'">
                            <el-icon size="30" color="#3772d3">
                                 <i-carbon-continue-filled />
                            </el-icon>
                        </div>
                        <div v-else class="text-blue-500 text-xl font-bold flex justify-center items-center m-auto" >
                            <span>
                                {{ state.down_minute>9?state.down_minute:'0'+state.down_minute }}
                            </span>
                            <div class="spec-circle-box">
                                <span class="spec-circle"></span>
                                <span class="spec-circle"></span>
                            </div>
                            <span>
                                {{ endTime }}
                            </span>
                        </div>
                    </div>
                </el-progress>
            </div>
            <transition name="el-fade-in">
                <div class="flex flex-col mx-auto mt-2" v-if="!state.isDark">
                    <div class="mx-auto flex justify-center">
                        <el-button-group>
                            <el-tooltip
                                effect="dark"
                                content="开始/继续"
                                placement="bottom"
                            >
                                <el-button type="primary" @click="confirmRun">
                                    <i-carbon-continue-filled />
                                </el-button>
                            </el-tooltip>
                            <el-tooltip
                                effect="dark"
                                content="暂停"
                                placement="top"
                            >
                                <el-button type="primary" @click="ClockPause">
                                    <i-clarity-pause-solid />
                                </el-button>
                            </el-tooltip>
                            <el-tooltip
                                effect="dark"
                                content="结束"
                                placement="bottom"
                            >
                                <el-button type="primary" @click="ClockStop">
                                    <i-carbon-stop-filled-alt />
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </div>
                    <div class="w-30 mt-3 mx-auto flex justify-center">
                        <el-input-number :disabled="state.status !== 'default'" placeholder="分钟数" v-model="state.number" />
                    </div>
                </div>
            </transition>
        </div>
        <audio class="hidden " ref="audio" src="./audio.mp3"></audio>
        <!-- 提醒弹窗 -->
        <el-dialog   v-model="state.vibrating" title="" :show-close="false" :custom-class="'bg-transparent'" @close="state.vibrating = false">
            <div class="flex justify-center cursor-pointer" :class="{ 'vibrate': state.vibrating }" @click="state.vibrating = false">
                <el-icon size="60" color="#fff">
                    <i-bxs-alarm/>
                </el-icon>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue"
import { ElMessageBox } from 'element-plus'
import { appWindow } from '@tauri-apps/api/window';
import { Rank, Sunny, Moon, Close } from "@element-plus/icons-vue"
import type { Action } from 'element-plus'
import { exit } from '@tauri-apps/api/process'


interface State{
    progress:number
    number:number
    time:string
    colors:Color[]
    timer:any
    progress_time:number
    sum_time:number
    down_minute:number,
    down_second:number,
    isDark: boolean
    // 状态 默认、运行中、暂停
    status: 'default' | 'running' | 'pause' 
    vibrating: boolean
}
interface Color{
    color:string
    percentage:number
}

const audio = ref<HTMLAudioElement | null>(null)

const state = reactive<State>({
    isDark:false,
    progress:0,
    number:25,
    time:'',
    colors:[
        { color: '#6f7ad3', percentage: 20 },
        { color: '#1989fa', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color:'#e6a23c' , percentage: 80 },
        { color:'#f56c6c' , percentage: 100 },
    ],
    timer:null,
    progress_time:0,//进行多少时间
    sum_time:0,
    down_minute:25,
    down_second:0,
    status: 'default',
    vibrating:false
})

const endTime = computed(() => {
    return state.down_second>9?state.down_second:'0'+state.down_second 
})

// 改变窗口置顶
const changeTop = async ()=>{
    if(state.isDark){
       await appWindow.setAlwaysOnTop(true);
    }else{
       await appWindow.setAlwaysOnTop(false);
    }
}


const miniStop = ()=>{
    if (state.isDark) {
        if (state.status === 'default' || state.status === 'pause') {
            ClockRun()
            return
        }
        if (state.status === 'running') {
            ClockPause()
            return
        }
    }
}

const closeWindow =  ()=>{
    ElMessageBox.confirm('确认退出应用程序么？', '提示', {
        confirmButtonText: '最小化托盘',
        cancelButtonText: '退出',
        distinguishCancelAndClose:true,
        callback: (action: Action) => {
            if(action === 'cancel'){
                exit()
            }
            if(action === 'confirm'){
                appWindow.hide()
            }
        },
    })
}


// 倒计时停止
const ClockStop = () => {
    if (state.status === 'pause' || state.status == 'running') {
        state.status = 'default'
        clearInterval(state.timer)
        state.timer = null
        state.number = 25
        state.progress_time = 0//进行多少时间
        state.progress = 0
        state.sum_time = 0
        state.down_minute = 25
        state.down_second = 0
    }
}

// 倒计时暂停
const ClockPause = () => {
    if (state.status === 'running') {
        state.status = 'pause'
        clearInterval(state.timer)
        state.timer = null
    }
}
// 倒计时开始
const ClockRun = () => {
    if (state.status === 'default' || state.status === 'pause') {
        // 开始运行
        state.status = 'running'
         // 总共多少秒
        state.sum_time = state.number*60
    
        state.timer = setInterval(async()=>{
            // 当前进行多少时间
            state.progress_time++
            state.down_second = (state.sum_time - state.progress_time)%60
            state.down_minute = Math.floor((state.sum_time - state.progress_time)/60)
            // 计算百分比
            state.progress = (state.progress_time/state.sum_time)*100
            if(state.progress >= 100 || state.progress_time >= state.sum_time){
                // ElMessageBox.alert('休息一下吧', '真棒', {
                //     confirmButtonText: '确认',
                //     callback: (action: Action) => {
                        
                //         // 关闭震动闹铃
                //         state.vibrating = false
                //     },
                // })
                // 获取窗口可见状态
                const visible = await appWindow.isVisible();
                if(!visible){
                    // 显示并居中
                    appWindow.show()
                    appWindow.center()
                }
                // 启用震动闹铃
                state.vibrating = true
                playMusic()
                ClockStop()
            }
        },1000)
    }
    
}
// 判断是否可以开始
const confirmRun = ()=>{
    if(state.number<=0){
        ElMessageBox.alert('请输入正确的分钟数', '提示', {
            confirmButtonText: '确认',
            callback: () => {},
        })
        return
    }
    ClockRun()
    
}

const playMusic = ()=>{
    audio.value?.play()
}

onMounted(()=>{
})
</script>
<style scoped>
.spec-circle-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 8px;
    height: 10px;
}
.spec-circle{
    width:4px;
    height: 4px;
    border-radius: 50%;
    background: #3b82f6;
}

/* 闹铃动画 */
.vibrate {
	-webkit-animation: vibrate 0.3s linear infinite both;
	        animation: vibrate 0.3s linear infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-11-17 10:57:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
 @-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

</style>
<style>
.bg-transparent{
    background-color: transparent;
}
</style>